<%--
  Created by IntelliJ IDEA.
  User: Win10
  Date: 2023/5/27
  Time: 18:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户数据大屏</title>
    <link href="${pageContext.request.contextPath}/css/common0.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/all.css" rel="stylesheet">
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery/myjs.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery/echarts.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery/china.js"></script>
    <style>
        .divtext {
            color: #fff;
            font-size: 14px;
            line-height: 28px;
            position: fixed;
            top: 1.45rem;
            left: 9.4rem;
            z-index: 1;
        }
    </style>
</head>
<body>
<div class="canvas" style="opacity: .2">
    <iframe frameborder="0" src="${pageContext.request.contextPath}/jquery/index.html" style="width: 100%; height: 100%"></iframe>
</div>
<div class="loading">
    <div class="loadbox"><img src="${pageContext.request.contextPath}/img/loading.gif">页面加载中...</div>
</div>
<div class="head">
    <h1>用户${tel}的数据大屏——${year}年度</h1>
    <div class="weather">
        <span id="showTime"></span>
    </div>
</div>
<div class="mainbox">
    <ul class="clearfix">
        <li class="twoli">
            <div class="boxall">
                <div class="alltitle">该年龄段观影偏好</div>
                <div class="allnav" style="padding-top: 20px;" id="echart1"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall">
                <div class="alltitle">用户观影偏好</div>
                <div class="allnav" id="echart2"></div>
                <div class="boxfoot"></div>
            </div>
        </li>
        <li class="middleli">
            <div class="bar">
                <div class="barbox">
                    <ul class="clearfix">
                        <li class="pulll_left counter" style="text-align: center;">
                            <c:forEach items="${usersumlogs}" var="usersumlog">
                                ${usersumlog.sumwatch}
                            </c:forEach>
                        </li>
                        <li class="pulll_left counter" style="text-align: center;">
                            <c:forEach items="${usersumlogs}" var="usersumlog">
                                <fmt:formatNumber type="number"
                                                  value="${usersumlog.sumduration/3600}"
                                                  maxFractionDigits="2"/>
                            </c:forEach>
                        </li>
                    </ul>
                </div>
                <div class="barbox2">
                    <ul class="clearfix">
                        <li class="pulll_left">年度观影次数/次</li>
                        <li class="pulll_left">年度观影时长/h</li>
                    </ul>
                </div>
            </div>
            <div>
                <img class="imgtext" src="${pageContext.request.contextPath}/img/0.png">
                <div class="divtext">
                    用户姓名：
                    <c:forEach items="${usersumlogs}" var="usersumlog">
                        ${usersumlog.name}
                    </c:forEach>
                    <br>
                    用户年龄：
                    <c:forEach items="${usersumlogs}" var="usersumlog">
                        ${usersumlog.age} 岁
                    </c:forEach>
                    <br>
                    用户性别：
                    <c:forEach items="${usersumlogs}" var="usersumlog">
                        ${usersumlog.gender}
                    </c:forEach>
                </div>
            </div>
            <div class="map" style="margin-top: -2.2rem;">
                <div class="map1"><img style="opacity: 0.4;" src="${pageContext.request.contextPath}/img/lbx.png"></div>
                <div class="map2"><img src="${pageContext.request.contextPath}/img/jt.png"></div>
                <div class="map3"><img style="opacity: 0.4;" src="${pageContext.request.contextPath}/img/map.png"></div>
                <div class="map4"><img style="opacity: 0.6;" src="${pageContext.request.contextPath}/img/1111.png"></div>
            </div>
        </li>
        <li class="twoli">
            <div class="boxall">
                <div class="alltitle">用户年度数据</div>
                <div class="allnav" style="padding-top: 20px;" id="echart3"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall">
                <div class="alltitle">年度电影排行</div>
                <div class="allnav" id="echart4"></div>
                <div class="boxfoot"></div>
            </div>
        </li>
    </ul>
</div>
<script>
    var sumwatchArray = [<c:forEach items="${agelogs}" var="agelog">${agelog.sumwatch},
        </c:forEach>];
    var maxWatch = Math.max(...sumwatchArray);
    var sumdurationArray = [<c:forEach items="${agelogs}" var="agelog">
        <fmt:formatNumber type="number" value="${agelog.sumduration/3600}"
        maxFractionDigits="2"/>,
        </c:forEach>];
    var maxDuration= Math.max(...sumdurationArray);
    var maxTop = Math.ceil(maxDuration / ((maxWatch+1)/2)) * ((maxWatch+1)/2);
    var Interval = maxTop / ((maxWatch+1)/2);

    var myChart = echarts.init(document.getElementById('echart1'));
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#fff'
                }
            }
        },
        toolbox: {
            feature: {
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            },
            iconStyle: {
                borderColor: '#ffffff'
            }
        },
        legend: {
            data: ['观影次数', '观影时长'],
            textStyle: {
                color: '#ffffff'
            }
        },
        xAxis: [
            {
                type: 'category',
                data: ['爱情', '动画', '动作', '纪录', '家庭', '剧情', '科幻', '奇幻', '喜剧', '悬疑', '语言'],
                axisPointer: {
                    type: 'shadow'
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#ffffff'
                    },
                    interval: 0
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '观影时长',
                nameTextStyle: {
                    color: '#ffffff'
                },
                min: 0,
                max: maxTop,
                interval: Interval,
                axisLabel: {
                    formatter: '{value} h',
                    textStyle: {
                        color: '#ffffff'
                    }
                }
            },
            {
                type: 'value',
                name: '观影次数',
                nameTextStyle: {
                    color: '#ffffff'
                },
                min: 0,
                max: maxWatch + 1,
                interval: 2,
                axisLabel: {
                    formatter: '{value} 次',
                    textStyle: {
                        color: '#ffffff'
                    }
                }
            }
        ],
        series: [
            {
                name: '观影时长',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' h';
                    }
                },
                textStyle: {
                    color: '#ffffff'
                },
                data: [
                    <c:forEach items="${agelogs}" var="agelog">
                    ['${agelog.film_type}',
                        <fmt:formatNumber type="number" value="${agelog.sumduration/3600}"
                        maxFractionDigits="2"/>],
                    </c:forEach>
                ],
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#83bff6' },
                        { offset: 0.5, color: '#188df0' },
                        { offset: 1, color: '#188df0' }
                    ])
                },
            },
            {
                name: '观影次数',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' 次';
                    }
                },
                textStyle: {
                    color: '#ffffff'
                },
                data: [
                    <c:forEach items="${agelogs}" var="agelog">
                    ['${agelog.film_type}', ${agelog.sumwatch}],
                    </c:forEach>
                ],
                itemStyle: {
                    color: '#ebe12a'
                }
            }
        ]
    };
    option && myChart.setOption(option);
</script>
<script>
    var myChart = echarts.init(document.getElementById('echart2'));
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '观影时长：{c}h<br />占比：{d}%'
        },
        toolbox: {
            feature: {
                saveAsImage: { show: true }
            },
            iconStyle: {
                borderColor: '#ffffff'
            }
        },
        color:['#63b2ee', '#76da91', '#f8cb7f','#f89588','#7cd6cf','#eddd86', '#efa666','#eddd86','#cfef84','#9acaee','#7898e1'],
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '65%',
                data: [
                    <c:forEach items="${preferencelogs}" var="preferencelog">
                    { value: <fmt:formatNumber type="number"
                    value="${preferencelog.sumduration/3600}" maxFractionDigits="2"/>
                        ,name: '${preferencelog.film_type}' },
                    </c:forEach>
                ],
                label: {
                    color: '#ffffff',
                    normal : {
                        formatter: '{b}({d}%)',
                        color: '#ffffff',
                    }
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    label: {
                        show: true,
                        fontSize: 13,
                        fontWeight: 'bold'
                    }
                }
            }
        ]
    };

    option && myChart.setOption(option);
</script>
<script>
    var sumwatchArray = [<c:forEach items="${yearlogs}" var="yearlog">${yearlog.sumwatch},
        </c:forEach>];
    var maxWatch = Math.max(...sumwatchArray);
    var sumdurationArray = [<c:forEach items="${yearlogs}" var="yearlog">
        <fmt:formatNumber type="number" value="${yearlog.sumduration/3600}" maxFractionDigits="2"/>,
        </c:forEach>];
    var maxDuration= Math.max(...sumdurationArray);
    var maxTop = Math.ceil(maxDuration / (maxWatch+1)) * (maxWatch+1);
    var Interval = maxTop / (maxWatch+1);

    var myChart = echarts.init(document.getElementById('echart3'));
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#fff'
                }
            }
        },
        toolbox: {
            feature: {
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            },
            iconStyle: {
                borderColor: '#ffffff'
            }
        },
        legend: {
            data: ['观影次数', '观影时长'],
            textStyle: {
                color: '#ffffff'
            }
        },
        xAxis: [
            {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisPointer: {
                    type: 'shadow'
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#ffffff'
                    },
                    interval: 0
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '观影时长',
                nameTextStyle: {
                    color: '#ffffff'
                },
                min: 0,
                max: maxTop,
                interval: Interval,
                axisLabel: {
                    formatter: '{value} h',
                    textStyle: {
                        color: '#ffffff'
                    }
                }
            },
            {
                type: 'value',
                name: '观影次数',
                nameTextStyle: {
                    color: '#ffffff'
                },
                min: 0,
                max: maxWatch + 1,
                interval: 1,
                axisLabel: {
                    formatter: '{value} 次',
                    textStyle: {
                        color: '#ffffff'
                    }
                }
            }
        ],
        series: [
            {
                name: '观影时长',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' h';
                    }
                },
                textStyle: {
                    color: '#ffffff'
                },
                data: [
                    <c:forEach items="${yearlogs}" var="yearlog">
                    ['${yearlog.month}月',
                        <fmt:formatNumber type="number" value="${yearlog.sumduration/3600}"
                        maxFractionDigits="2"/>],
                    </c:forEach>
                ],
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#83bff6' },
                        { offset: 0.5, color: '#188df0' },
                        { offset: 1, color: '#188df0' }
                    ])
                }
            },
            {
                name: '观影次数',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' 次';
                    }
                },
                textStyle: {
                    color: '#ffffff'
                },
                data: [
                    <c:forEach items="${yearlogs}" var="yearlog">
                    ['${yearlog.month}月', ${yearlog.sumwatch}],
                    </c:forEach>
                ],
                itemStyle: {
                    color: '#ebe12a'
                }
            }
        ]
    };
    option && myChart.setOption(option);
</script>
<script>
    var myChart = echarts.init(document.getElementById('echart4'));
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '收视时长：{c}h<br />占比：{d}%'
        },
        toolbox: {
            feature: {
                saveAsImage: { show: true }
            },
            iconStyle: {
                borderColor: '#ffffff'
            }
        },
        color:['#63b2ee', '#76da91', '#f8cb7f','#f89588','#7cd6cf','#eddd86', '#efa666','#eddd86','#cfef84','#9acaee','#7898e1'],
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '65%',
                data: [
                    <c:forEach items="${filmsumlogs}" var="filmsumlog">
                    { value: <fmt:formatNumber type="number"
                    value="${(filmsumlog.sumduration/3600)}" maxFractionDigits="2"/>
                        ,name: '${filmsumlog.film_type}' },
                    </c:forEach>
                ],
                label: {
                    normal : {
                        formatter: '{b}({d}%)',
                        color: '#ffffff',
                    }
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    label: {
                        show: true,
                        fontSize: 13,
                        fontWeight: 'bold'
                    }
                }
            }
        ]
    };

    option && myChart.setOption(option);
</script>
</body>
</html>
